<template>
	<el-dialog :visible.sync="options.showDialog" width="800px" class="evalDialog">
		<h3 class="header-title clearfix">
			<span class="border"></span>
			<p>{{options.msg.shopName?options.msg.shopName:'审核门店信息'}}</p>
		</h3>
		<ul class="examine-content clearfix" style="height: 525px;
    width: 718px;
    overflow-y: scroll;">
			<li class="text-msg fl">
				<p class="clearfix">
					<span class="label fl">门店区域:</span>
					<span class="value fl">{{options.msg.province}}-{{options.msg.city}}-{{options.msg.area}}</span>
				</p>
				<p class="clearfix">
					<span class="label fl">详细地址:</span>
					<span class="value fl">{{options.msg.detilAddress}}</span>
				</p>
				<p class="clearfix">
					<span class="label fl">门店联系人:</span>
					<span class="value fl">{{options.msg.operationContact|empty}}</span>
				</p>
				<p class="clearfix">
					<span class="label fl">门店联系人身份:</span>
					<span class="value fl">{{options.msg.contactidentity|empty}}</span>
				</p>
				<p class="clearfix">
					<span class="label fl">门店联系电话:</span>
					<span class="value fl">{{options.msg.operationContactNumber|empty}}</span>
				</p>
				<p class="clearfix">
					<span class="label fl">简介:</span>
					<span class="value fl">{{options.msg.shopAreaFlow}}</span>
				</p>
				<div class="img-msg-top">
					<div v-if="options.msg.identityFrontPicture">
						<div class="img-msg-title" style="margin-bottom: 30px; line-height: 55px;">
							<p class="img-msg-title" style="margin-bottom:-16px; line-height: 98px;">法人身份证</p>
							<img style="height: 120px; width: 120px; margin: 0 8px;"
								:src="options.msg.identityFrontPicture"
								@click="openBigImg(options.msg.identityFrontPicture)" alt="">
							<img style="height: 120px; width: 120px;" :src="options.msg.identityVersoPicture"
								@click="openBigImg(options.msg.identityVersoPicture)" alt="">
						</div>
					</div>

					<div v-if="options.msg.storephotosbyUsers">
						<p class="img-msg-title" style="margin-bottom:-16px; line-height: 98px;">门店环境</p>
						<div class="img-msg-title" style="margin-bottom: 30px; line-height: 55px;">
							<img style="height: 120px; width: 120px; margin: 0 8px;"
								v-for="(item,index) in options.msg.storephotosbyUsers" @click="openBigImg(item)"
								:src="item" alt="">
						</div>
					</div>

				</div>
			</li>
			<li class="img-msg fl">
				<div class="img-msg-top">
					<div class="fl">
						<p class="img-msg-title">门店照片</p>
						<div class="img-msg-content" @click="openBigImg(options.msg.storePhotos)">
							<img :src="options.msg.storePhotos" alt="">
						</div>
					</div>

					<div class="fl" v-if="options.msg.shopShowPhoto">
						<p class="img-msg-title">门店展示照片（由后台上传）</p>
						<div class="img-msg-content" @click="openBigImg(options.msg.shopShowPhoto)">
							<img :src="options.msg.shopShowPhoto" alt="">
						</div>
					</div>

				</div>
				<p class="img-msg-title"
					v-if="options.msg.storeBusinessLicense && options.msg.storeBusinessLicense.length > 0">门店营业执照</p>
				<div class="img-msg-content"
					v-if="options.msg.storeBusinessLicense && options.msg.storeBusinessLicense.length > 0">
					<img v-for="(item,index) in options.msg.storeBusinessLicense" @click="openBigImg(item)" :src="item"
						alt="">
				</div>








			</li>
		</ul>
		<div class="opt" v-if="options.type == 'examine'">
			<el-input type="textarea" :rows="2" placeholder="请输入内容" v-if="showInput" v-model="textarea" class="reason">
			</el-input>

			<el-button type="success" v-if="!showInput" size="small" style="width: 100px;"
				@click="$emit('examineStore')">通过</el-button>
			<el-button type="info" v-if="!showInput" size="small" style="width: 100px;" @click="showInput = true;">驳回
			</el-button>

			<el-button type="danger" v-if="showInput" size="small" style="width: 100px;" @click="subFail">确定</el-button>
			<el-button size="small" v-if="showInput" style="width: 100px;" @click="showInput = false;">取消</el-button>
		</div>
		<div v-else class="examine-record">
			<el-table :data="options.dataList" border style="width: 100%">
				<el-table-column prop="userName" align="center" label="操作人"></el-table-column>
				<el-table-column prop="cause" align="center" label="操作结果"></el-table-column>
				<el-table-column prop="insertdate" align="center" label="操作时间"></el-table-column>
			</el-table>
		</div>
		<el-dialog :visible.sync="imgShow" width="600px" class="evalDialog" style="padding: 20px;" :modal="false">
			<img :src="imgHref" alt="" style="width: 100%;">
		</el-dialog>
	</el-dialog>
</template>

<script>
	export default {
		props: {
			options: {
				type: Object,
				require: true
			}
		},
		data() {
			return {
				imgShow: false, //图片放大功能
				imgHref: '', //图片路径
				showInput: false, //显示原因弹窗
				textarea: '', //原因
			}
		},
		methods: {
			// 驳回
			subFail() {
				if (!this.textarea) {
					this.$message.warning('请输入未通过理由！');
				} else {
					this.$emit('examineStore', this.textarea);
					this.textarea = '';
				}
			},
			// 打开图片放大弹窗
			openBigImg(href) {
				this.imgHref = href;
				this.imgShow = true;
			}
		},
	}
</script>

<style scoped="scoped">
	.img-msg-idcard {
		width: 120px;
		height: 120px;
	}

	.header-title {
		padding: 20px;
	}

	.header-title .border {
		width: 15px;
		height: 40px;
		background-color: #0064E4;
		margin-right: 20px;
		float: left;
	}

	.header-title p {
		float: left;
		font-weight: bold;
		line-height: 40px;
		font-size: 20px;
	}

	.examine-content {
		width: 700px;
		margin: 0 auto 20px;
	}

	.text-msg {
		width: 360px;
	}

	.img-msg {
		width: 340px;
	}

	.text-msg .clearfix {
		line-height: 30px;
	}

	.text-msg .label {
		width: 120px;
	}

	.img-msg .img-msg-title {
		margin-bottom: 10px;
		line-height: 30px;
	}

	.img-msg .img-msg-content {
		overflow: hidden;
		margin-bottom: 10px;
	}

	.img-msg .img-msg-content img {
		width: 120px;
		height: 120px;
		border: 1px solid #000;
		margin: 0 15px 15px 0;
		float: left;
	}

	.img-msg-top {
		overflow: hidden;
	}

	.opt {
		text-align: center;
		padding: 30px;
	}

	.reason {
		width: 80%;
		margin: 20px 10%;
	}

	.examine-record {
		margin: 0 auto;
		width: 700px;
		padding-bottom: 20px;
	}
</style>
